<template lang="html">
  <div class="index">
    <!-- 导航开始 -->
   <MusicNav />
   <!-- 导航结束 -->
   <!-- 图片开始 -->
   <div class="banner">
      <img src="../assets/images/1@2x (2).png" alt="">
   </div>
   <!-- 图片结束 -->
   <!-- 点击按钮开始 -->
    <div class="musicBtn">
      <ul>
        <router-link to="/musicsinger" tag="li">
            <img src="../assets/images/icon-singer@2x.png" alt="">
            <span>歌手</span>
        </router-link>
        <router-link to="/musicvideo" tag="li">
            <img src="../assets/images/shipin.png" alt="">
          <span>视频</span>
        </router-link>
        <router-link to="/radio" tag="li">

            <img src="../assets/images/radio@2x.png" alt="">

            <span>电台</span>
        </router-link>

        <router-link to="/musicgedan" tag="li">
            <img src="../assets/images/gedan (2).png" alt="">
            <span>歌单</span>
        </router-link>

        <li>
            <img src="../assets/images/diantai.png" alt="">
          <span>专辑</span>
        </li>
        <li>
            <img src="../assets/images/paihangbang.png" alt="">
          <span>排行榜</span>
        </li>
      </ul>
    </div>
   <!-- 点击按钮结束 -->
   <!--线条开始  -->
<div class="musichHr"></div>
   <!-- 线条结束 -->
   <!-- 标题开始 -->
   <p class="musicTitle">歌单推荐</p>
   <!-- 标题开始 -->
   <MusicList />
  </div>
</template>
<script>
import MusicNav from "../components/musicNav.vue"
import MusicList from "../components/musicList"

export default {
  name:"index",
  data(){
    return{

    }
  },
  components:{
    MusicNav,
    MusicList
  }
}
</script>

<style scoped>
.banner{
  width: 100%;
  height: 3.5rem;
}
.banner img{
  width: 100%;
  height: 100%
}
/* musicBtn start*/
.musicBtn{
  width: 100%;
  overflow: hidden;
  display:flex;
  justify-content: center;
}
.musicBtn ul{
  text-align: center;
  width: 85%;
  padding-left: 0.9rem;

}
.musicBtn ul li{
  float: left;
  margin-right:1.3rem;

  /* margin-left: 0.05rem; */
  margin-top: 0.24rem;
  font-size: 0.35rem;
  font-weight: bold;
  color: black;
}
.musicBtn ul li span{
  margin-top: 0.24rem;
  display: block;
}
.musicBtn ul li img{
  width: 0.6rem;
  height: 0.6rem;
}
.musichHr{
  width: 100%;
  height: 0.2rem;
  background: #dbd7df;
}
.musicTitle{
  display: block;
  height: 0.86rem;
  line-height: 0.86rem;
  padding-left: 0.2rem;
  font-size: 0.35rem;
  font-weight: 700;
  color: black;
}
</style>
